import React, { Component } from 'react'
import { Button, Modal, Form, Input, Row, Col, Select, Table, Card, DatePicker, Icon} from 'antd';
import styles from './style.less';
import moment from 'moment'


import ImpoProduct from './ImpoProduct'
import BasicInform from './BasicInform'
import BusinessForm from './BusinessForm'
import Innovation from './Innovation'
import Reward from './Reward'
import PrincipalHonor from './PrincipalHonor'
import CompanyAppeal from './CompanyAppeal'
import RecommendReason from './RecommendReason'



const typeOptions = {
    qiyegaikuang: '企业基本信息',
    jingyingshuju: '企业经营数据',
    zhuyingchanpin: '主营产品',
    kejichuangxin: '科技创新（核心技术研发）',
    zijinjiangli: '产业资金奖励情况',
    zhuyaorongyu: '主要荣誉',
}

const selectOptions = [
    {value: '企业基本信息', key: '企业基本信息'},
    {value: '企业经营数据', key: '企业经营数据'},
    {value: '主营产品', key: '主营产品'},
    {value: '科技创新（核心技术研发）', key: '科技创新（核心技术研发）'},
    {value: '产业资金奖励情况', key: '产业资金奖励情况'},
    {value: '主要荣誉', key: '主要荣誉'},
]

const children = []
selectOptions.forEach(v => {
    children.push(<Select.Option value={v.key}>{v.value}</Select.Option>)
})
// eslint-disable-next-line react/prefer-stateless-function
class ChangeRecord extends Component {
    state = {
        visible: false,
        content: [{}],
        type: '',
        // 收起展开
        expand: false,
        data: [],
        columns: [
            {
              title: '变更时间',
              dataIndex: 'change_time',
              width: 200,
              render: record => (
                <span>{moment(record).format("YYYY-MM-DD")}</span>
              ),
            },
            {
              title: '变更内容',
              dataIndex: 'change_type'
            },
            {
              title: '操作人员',
              dataIndex: 'change_people',
            },
            {
              title: '操作',
              dataIndex: 'option',
              valueType: 'option',
              align: 'center',
              width: 70,
              render: (_, record) => (
                <>
                  <a
                    onClick={() => {
                    //   this.showModal()
                        this.checkOptions(record)
                    }}
                  >
                    查看
                  </a>
                </>
              ),
            },
        ],
    }

    componentDidMount = () => {
        // eslint-disable-next-line no-console
        this.initData()
    }

    componentDidUpdate = () => {
        // this.initData()
    }

    // eslint-disable-next-line react/sort-comp
    initData = () => {
        this.setState({
            data: this.props.data
        })
    }

    showModal = () => {
        this.setState({ visible: true })
    }

    handleOk = () => {
        this.setState({ visible: false })
    }

    handleCancel = () => {
        this.setState({ visible: false })
    }

    checkOptions = record => {
        this.setState({
            type: record.change_type,
            content: record.change_content,
            visible: true
        })
    }

    // 生成表头搜索
    getFields() {
        const formItemLayout = { labelCol: { span: 4 }, wrapperCol: { span: 14 } }
        const { getFieldDecorator } = this.props.form
        const count = !!this.state.expand;
        if ( count ) {
            return (
                <>
                    <Col span={8}>
                        <Form.Item label="变更内容" {...formItemLayout}>
                            {getFieldDecorator("change_type")(
                                <Select placeholder="请选择">
                                    {children}
                                </Select>
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="变更时间" {...formItemLayout}>
                            {getFieldDecorator("change_time")(
                                <DatePicker />
                            )}
                        </Form.Item>
                    </Col>
                    <Col span={8}>
                        <Form.Item label="操作人员" {...formItemLayout}>
                            {getFieldDecorator("change_people")(
                                <Input placeholder="请输入" />
                            )}
                        </Form.Item>
                    </Col>
                </>
            )
        } 
        return (
            <>
                <Col span={8}>
                    <Form.Item label="变更内容" {...formItemLayout}>
                        {getFieldDecorator("change_type")(
                            <Select placeholder="请选择">
                                {children}
                            </Select>
                        )}
                    </Form.Item>
                </Col>
                <Col span={8}>
                    <Form.Item label="变更时间" {...formItemLayout}>
                        {getFieldDecorator("change_time")(
                            <DatePicker />
                        )}
                    </Form.Item>
                </Col>
            </>
        )
    }

    // 收起展开
    toggle = () => {
        const { expand } = this.state
        this.setState({ expand: !expand })
    }

    // 搜索表查询
    handleSearch = e => {
        let originallyArrary = [...this.props.data]
        e.preventDefault()
        this.props.form.validateFields((err, values) => {
            // 日期转为字符串对比
            if (values.change_time) {
                // eslint-disable-next-line no-param-reassign
                values.change_time = values.change_time.format("YYYY-MM-DD")
            }
            Object.keys(values).forEach(key => {
                if (values[key]) {
                    const newBlank = []
                    if (key === 'change_time') {
                        originallyArrary.forEach((val, index) => {
                            if (moment(val[key]).format("YYYY-MM-DD").includes(values[key])) {
                                newBlank.push(originallyArrary[index])
                            }
                        })
                    } else {
                        originallyArrary.forEach((val, index) => {
                            if (val[key].includes(values[key])) {
                                newBlank.push(originallyArrary[index])
                            }
                        })
                    }
                    originallyArrary = newBlank
                }
            })
            this.setState({
                data: originallyArrary
            })
        })
    }

    // 搜索表重置
    handleReset = () => {
        this.props.form.resetFields()
    }

    render () {
        // eslint-disable-next-line consistent-return
        const Check = () => {
            // eslint-disable-next-line default-case
            switch (this.state.type) {
                case '企业基本信息':
                    return (<BasicInform data={this.state.content} type="show"/>)
                    // eslint-disable-next-line no-unreachable
                    break;
                case '企业经营数据':
                    return (<BusinessForm data={this.state.content} type="show"/>)
                    // eslint-disable-next-line no-unreachable
                    break;
                case '主营产品':
                    return (<ImpoProduct data={[this.state.content]} type="show"/>)
                    // eslint-disable-next-line no-unreachable
                    break;
                case '科技创新（核心技术研发）':
                    return (<Innovation data={[this.state.content]} type="show"/>)
                    // eslint-disable-next-line no-unreachable
                    break;
                case '产业资金奖励情况':
                    return (<Reward data={[this.state.content]} type="show"/>)
                    // eslint-disable-next-line no-unreachable
                    break;
                case '主要荣誉':
                    return (<PrincipalHonor data={[this.state.content]} type="show"/>)
                    // eslint-disable-next-line no-unreachable
                    break;
            }

            
        }

        
        // 编辑弹窗
        const CheckChangeRecord = () => (
            <Modal
                title={this.state.type}
                visible={this.state.visible}
                onOk={this.handleOk}
                onCancel={this.handleCancel}
                width='90%'
                style={{ top: '33px' }}
                bodyStyle={{ padding: '0px' }}
            >
                <Check />
            </Modal>
            
        )

        return (
            <Card>
                <CheckChangeRecord />
                <Form onSubmit={this.handleSearch} className={styles.tableSerech}>
                    <Row gutter={24}>
                        {this.getFields()}
                        <Col span={8}>
                            <Form.Item style={{display: 'flex' }}>
                                <Button type="primary" htmlType="submit">
                                    查询
                                </Button>
                                <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
                                    重置
                                </Button>
                                <a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.toggle}>
                                    {this.state.expand ? '收起' : '展开'} <Icon type={this.state.expand ? 'up' : 'down'} />
                                </a>
                            </Form.Item>
                        </Col>
                    </Row>
                </Form>
                <Table
                    rowKey="key"
                    dataSource={this.state.data}
                    columns={this.state.columns}
                    pagination={{
                        defaultPageSize: 10,
                        showQuickJumper: true,
                        showSizeChanger: true
                    }}
                >
                </Table>
            </Card>
        )
    }
}

const WrappedDynamicFieldSet = Form.create()(ChangeRecord);


export default WrappedDynamicFieldSet